import React, { useState, useContext } from "react";
import {
  View,
  Platform,
  StatusBar,
  StyleSheet,
  Text,
  TextInput,
  Image,
  TouchableOpacity,
  Switch,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import queryApi from "../../api/query";
import personMessageContext from "../../context/personalDetails/personMessageContext";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { Alert } from "react-native";

const ApplicationScreen = ({ navigation }) => {
  const [isEnabled, setIsEnabled] = useState(true);
  const [isVisible, setIsVisible] = useState(false);
  const [company_name, setCompany_name] = useState("");
  const [address, setAddress] = useState("");
  const [detailed_address, setDetailed_address] = useState("");
  const [company_phone, setCompany_phone] = useState("");
  const [admin_name, setAdmin_name] = useState("");
  const [admin_phone, setAdmin_phone] = useState("");
  const [admin_weChat, setAdmin_weChat] = useState("1233245678");
  const [charter, setCharter] = useState("1234563278");
  const [organization_code, setOrganization_code] = useState("1234325678");
  const [tax_certificate, setTax_certificate] = useState("1234325678");
  const [open_account, setOpen_account] = useState("1234567328");
  const [authorization, setAuthorization] = useState("1234563278");
  const { personMessage, editMessage } = useContext(personMessageContext);

  const toggleSwitch = () => setIsEnabled((previousState) => !previousState);

  const addCompany = async (data) => {
    try {
      const token = await AsyncStorage.getItem("token");
      if (!token) {
        console.log("请求userId出错");
      }
      const response = await queryApi.post("/company", data, {
        headers: { Authorization: token },
      });
      if (response.data.status == "success") {
        Alert.alert("成功", "创建公司成功", [{ text: "确定" }]);
      } else {
        Alert.alert("失败", "创建公司出错", [{ text: "确定" }]);
      }
      const newUser = {
        company_id: response.data.data._id,
        role: "admin",
      };
      editMessage(newUser);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.topView}>
        <TouchableOpacity
          style={{ position: "absolute", left: 5 }}
          onPress={() => {
            navigation.navigate("NormalUser");
          }}
        >
          <Ionicons name="arrow-back" size={24} color="black" />
        </TouchableOpacity>
        <Text style={{ fontSize: 17 }}>企业认证</Text>
      </View>
      <View>
        <Text
          style={{
            marginLeft: 10,
            marginTop: 5,
            marginBottom: 5,
            color: "#b8b8b8",
          }}
        >
          公司信息*
        </Text>
        <View style={styles.itemStyle}>
          <Text style={styles.itemTitle}>公司名称*:</Text>
          <TextInput
            style={[styles.itemInput, { width: 250 }]}
            placeholder="请输入营业执照上公司全称"
            textAlign="right"
            value={company_name}
            onChangeText={(text) => {
              setCompany_name(text);
            }}
          ></TextInput>
        </View>
        <View style={styles.itemStyle}>
          <Text style={styles.itemTitle}>公司地址*:</Text>
          <TextInput
            style={[styles.itemInput, { width: 250 }]}
            placeholder="请输入省市区"
            textAlign="right"
            value={address}
            onChangeText={(text) => {
              setAddress(text);
            }}
          ></TextInput>
        </View>
        <View style={styles.itemStyle}>
          <Text style={styles.itemTitle}>公司详细街道*:</Text>
          <TextInput
            style={[styles.itemInput, { width: 250 }]}
            placeholder="请输入详细街道"
            textAlign="right"
            value={detailed_address}
            onChangeText={(text) => {
              setDetailed_address(text);
            }}
          ></TextInput>
        </View>
        <View style={styles.itemStyle}>
          <Text style={styles.itemTitle}>公司电话*:</Text>
          <TextInput
            style={[styles.itemInput, { width: 250 }]}
            placeholder="请输入公司固话"
            textAlign="right"
            value={company_phone}
            onChangeText={(text) => {
              setCompany_phone(text);
            }}
          ></TextInput>
        </View>
      </View>
      <View>
        <Text
          style={{
            marginLeft: 10,
            marginTop: 5,
            marginBottom: 5,
            color: "#b8b8b8",
          }}
        >
          联系人信息*
        </Text>
        <View style={styles.itemStyle}>
          <Text style={styles.itemTitle}>联系人名称*:</Text>
          <TextInput
            style={[styles.itemInput, { width: 250 }]}
            placeholder="请输入联系人名称"
            textAlign="right"
            value={admin_name}
            onChangeText={(text) => {
              setAdmin_name(text);
            }}
          ></TextInput>
        </View>
        <View style={styles.itemStyle}>
          <Text style={styles.itemTitle}>联系人电话*:</Text>
          <TextInput
            style={[styles.itemInput, { width: 250 }]}
            placeholder="请输入联系人电话"
            textAlign="right"
            value={admin_phone}
            onChangeText={(text) => {
              setAdmin_phone(text);
            }}
          ></TextInput>
        </View>
      </View>
      <View>
        <Text
          style={{
            marginLeft: 10,
            marginTop: 5,
            marginBottom: 5,
            color: "#b8b8b8",
          }}
        >
          资料信息*(授权书联系人需要当前联系人一致)
        </Text>
        <View style={styles.itemStyle}>
          <Text style={styles.itemTitle}>是否三证合一:</Text>
          <Switch
            trackColor={{ false: "#767577", true: "#81b0ff" }}
            thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
            ios_backgroundColor="#3e3e3e"
            onValueChange={() => {
              toggleSwitch();
              setIsVisible(!isVisible);
            }}
            value={isEnabled}
          />
        </View>
        <View style={styles.itemStyle}>
          <Text style={styles.itemTitle}>营业执照*:</Text>
          <TouchableOpacity>
            <Image
              style={styles.itemImage}
              source={require("../../../assets/userMessage/xiangji.png")}
            ></Image>
          </TouchableOpacity>
        </View>
        <View>
          {isVisible ? (
            <View>
              <View style={styles.itemStyle}>
                <Text style={styles.itemTitle}>组织机构代码*:</Text>
                <TouchableOpacity>
                  <Image
                    style={styles.itemImage}
                    source={require("../../../assets/userMessage/xiangji.png")}
                  ></Image>
                </TouchableOpacity>
              </View>
              <View style={styles.itemStyle}>
                <Text style={styles.itemTitle}>税务登记证*:</Text>
                <TouchableOpacity>
                  <Image
                    style={styles.itemImage}
                    source={require("../../../assets/userMessage/xiangji.png")}
                  ></Image>
                </TouchableOpacity>
              </View>
            </View>
          ) : null}
        </View>
        <View style={styles.itemStyle}>
          <Text style={styles.itemTitle}>开户许可证:</Text>
          <TouchableOpacity>
            <Image
              style={styles.itemImage}
              source={require("../../../assets/userMessage/xiangji.png")}
            ></Image>
          </TouchableOpacity>
        </View>
        <View style={styles.itemStyle}>
          <Text style={styles.itemTitle}>授权书*:</Text>
          <TouchableOpacity>
            <Image
              style={styles.itemImage}
              source={require("../../../assets/userMessage/xiangji.png")}
            ></Image>
          </TouchableOpacity>
        </View>
      </View>
      <TouchableOpacity
        style={[styles.button]}
        onPress={() => {
          const data = {
            company_name: company_name,
            detailed_address: detailed_address,
            address: address,
            company_phone: company_phone,
            admin_name: admin_name,
            admin_phone: admin_phone,
            admin_weChat: admin_weChat,
            charter: charter,
            ifone: true,
            organization_code: organization_code,
            tax_certificate: tax_certificate,
            open_account: open_account,
            authorization: authorization,
          };
          addCompany(data);
        }}
      >
        <Text style={styles.buttonText}>提交</Text>
      </TouchableOpacity>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "#f4f4f4",
  },
  topView: {
    backgroundColor: "white",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    height: 40,
  },
  itemStyle: {
    backgroundColor: "white",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    height: 40,
    borderBottomWidth: 1,
    borderBottomColor: "#f4f4f4",
  },
  itemTitle: {
    marginLeft: 10,
  },
  itemInput: {
    marginRight: 10,
  },
  itemImage: {
    // 图片等比例拉伸
    resizeMode: "contain",
    width: 25,
    height: 25,
    marginRight: 10,
  },
  ModalBackground: {
    backgroundColor: "#727272",
    opacity: 0.3,
    zIndex: 0,
    position: "absolute",
    width: "100%",
    height: "100%",
  },
  ModalStyle: {
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    backgroundColor: "#ffffff",
    zIndex: 1,
    position: "relative",
  },
  ModalTop: {
    flex: 1,
  },
  modalOption: {
    // backgroundColor: "yellow",
    width: "100%",
    padding: 15,
    borderBottomWidth: 0.5,
    borderBottomColor: "#e6e6e6",
  },
  modalText: {
    alignSelf: "center",
    fontSize: 16,
    color: "#201D1D",
  },
  button: {
    marginTop: 20,
    borderRadius: 13,
    borderWidth: 1,
    borderColor: "#63b5e7",
    alignSelf: "center",
    padding: 5,
    paddingRight: 70,
    paddingLeft: 70,
  },
  buttonText: {
    fontSize: 16,
    color: "#6d6d6d",
  },
});
export default ApplicationScreen;
